<template>
  <div>
    <el-card>
      <el-row>
        <div class="g2-list">
          <div class="list-item">苹果</div>
          <div class="list-item">梨</div>
          <div class="list-item">橘子</div>
        </div>

        <div class="g2-list is-divided">
          <div class="list-item">苹果</div>
          <div class="list-item">梨</div>
          <div class="list-item">橘子</div>
        </div>

        <ul class="g2-list">
          <li>增加权限</li>
          <li>邀请好友</li>
          <li>利益
            <ul>
              <li>任何地方都可以使用</li>
              <li>折扣</li>
              <li>折扣</li>
            </ul>
          </li>
          <li>Warranty</li>
        </ul>

        <div class="is-horizontal bulleted g2-list">
          <a class="list-item">About Us</a>
          <a class="list-item">Sitemap</a>
          <a class="list-item">Contact</a>
        </div>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header">
        <div>图片</div>
        <div>列表可以包含图片</div>
      </div>
      <div class="g2-list">
        <div class="list-item">
          <img class="g2-avator image" src="~@public/image/example/nan.jpg">
          <div class="list-item-content">
            <a class="header">Rachel</a>
            <div class="description">
              刚刚看了
              <a>
                <b>Arrested Development</b>
              </a> 。
            </div>
          </div>
        </div>
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/tom.jpg">
          <div class="list-item-content">
            <a class="header">Lindsay</a>
            <div class="description">
              最近看
              <a>
                <b>Bob's Burgers</b>
              </a> 是10个小时以前。
            </div>
          </div>
        </div>
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/nan.jpg">
          <div class="list-item-content">
            <a class="header">Matthew</a>
            <div class="description">
              最近看
              <a>
                <b>The Godfather Part 2</b>
              </a> 是在昨天。
            </div>
          </div>
        </div>
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/tom.jpg">
          <div class="list-item-content">
            <a class="header">Jenny Hess</a>
            <div class="description">
              最近看
              <a>
                <b>Twin Peaks</b>
              </a> 是在三天以前。
            </div>
          </div>
        </div>
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/nan.jpg">
          <div class="list-item-content">
            <a class="header">Veronika Ossi</a>
            <div class="description">最近没有看过什么。</div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card>
      <div slot="header">
        <div>图片</div>
        <div>列表可以包含图片</div>
      </div>
      <div class="g2-list">
        <a class="list-item">常见问题</a>
        <a class="list-item">Who is our user?</a>
        <a class="list-item">Where is our office located?</a>
      </div>
    </el-card>

    <el-card>
      <div slot="header">
        <div>is-selection</div>
        <div>可选择的列表将条目设置为可选择的样式。</div>
      </div>
      <div class="g2-list is-selection">
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/nan.jpg">
          <div class="list-item-content">
            <div class="header">海伦</div>
          </div>
        </div>
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/nan.jpg">
          <div class="list-item-content">
            <div class="header">Christian</div>
          </div>
        </div>
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/nan.jpg">
          <div class="list-item-content">
            <div class="header">丹尼尔</div>
          </div>
        </div>
      </div>
    </el-card>

     <el-card>
      <div slot="header">
        <div>is-animated</div>
        <div>列表可以设置动画，使当前项目脱离开列表。</div>
      </div>
      <div class="g2-list is-animated">
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/nan.jpg">
          <div class="list-item-content">
            <div class="header">海伦</div>
          </div>
        </div>
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/nan.jpg">
          <div class="list-item-content">
            <div class="header">Christian</div>
          </div>
        </div>
        <div class="list-item">
          <img class="g2-avator g2-image" src="~@public/image/example/nan.jpg">
          <div class="list-item-content">
            <div class="header">丹尼尔</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "g2ExampleList",
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {}
};
</script>

<style scoped lang="scss">
</style>
